<template>
	<view class="container">
		<!-- 商品规格编码部分 -->
		<view class="spec-code-section">
			<view class="section-header">
				<text class="header-title">商品规格编码</text>
			</view>

			<view class="input-row">
				<text class="input-label">规格编码：</text>
				<input class="spec-input" v-model="specCode" placeholder="请输入或粘贴规格编码" placeholder-class="placeholder" @focus="startClipboardWatch" @blur="stopClipboardWatch" />
			</view>

			<view class="clipboard-status" v-if="clipboardMessage">
				<text>{{ clipboardMessage }}</text>
			</view>
		</view>

		<!-- 打印按钮 -->
		<view class="footer-buttons-section">
			<button class="print-button" @click="handlePrint" :disabled="isPrinting">
				{{ isPrinting ? '打印中...' : '打印' }}
			</button>
		</view>

		<!-- 打印状态显示 -->
		<view class="status-section" v-if="printStatus">
			<text class="status-text" :class="statusClass">{{ printStatus }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onUnmounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		sendPrintRequest
	} from '@/utils/printer.js';

	// 规格编码
	const specCode = ref('');
	// 打印状态
	const printStatus = ref('');
	// 是否正在打印
	const isPrinting = ref(false);
	// 剪切板消息
	const clipboardMessage = ref('');
	// 剪切板监听器
	const clipboardInterval = ref(null);
	// 上次剪切板内容
	const lastClipboardContent = ref('');

	// 状态文本样式
	const statusClass = computed(() => {
		return printStatus.value.includes('成功') ? 'success' :
			printStatus.value.includes('失败') ? 'error' : 'info';
	});

	// 开始监听剪切板
	const startClipboardWatch = () => {
		// 先立即检查一次
		checkClipboard();

		// 设置定时器每1秒检查一次
		clipboardInterval.value = setInterval(checkClipboard, 1000);
	};

	// 停止监听剪切板
	const stopClipboardWatch = () => {
		if (clipboardInterval.value) {
			clearInterval(clipboardInterval.value);
			clipboardInterval.value = null;
		}
		clipboardMessage.value = '';
	};

	// 检查剪切板内容
	const checkClipboard = async () => {
		try {
			const {
				data
			} = await uni.getClipboardData();

			// 如果剪切板有新内容且与上次不同
			if (data && data !== lastClipboardContent.value) {
				lastClipboardContent.value = data;

				// 如果输入框为空或者内容不同，则更新
				if (!specCode.value || specCode.value !== data) {
					specCode.value = data;
					clipboardMessage.value = '已自动填充剪切板内容';
					setTimeout(() => clipboardMessage.value = '', 2000);
				}
			}
		} catch (err) {
			console.error('读取剪切板失败:', err);
		}
	};

	// 打印函数
	const handlePrint = async () => {
		if (!specCode.value) {
			printStatus.value = '请输入规格编码';
			return;
		}

		isPrinting.value = true;
		printStatus.value = '正在准备打印...';

		try {
			await sendPrintRequest("test-computer-id", {
				skuOuterId: specCode.value
			});

			printStatus.value = '打印成功，请取走打印件';
			// 打印成功后清空输入框
			setTimeout(() => {
				specCode.value = '';
				printStatus.value = '';
			}, 3000);
		} catch (err) {
			printStatus.value = `打印失败: ${err}`;
		} finally {
			isPrinting.value = false;
		}
	};

	// 页面加载时
	onLoad(async () => {
		await checkClipboard();
	});

	// 页面卸载时清除定时器
	onUnmounted(() => {
		stopClipboardWatch();
	});
</script>

<style lang="scss">
	$background-color: #f5f5f5;
	$card-background: #fff;
	$primary-color: #3399CC;
	$add-color: #99CC33;
	$border-color: #eee;
	$text-color-dark: #000000;
	$text-color-light: #CCCCCC;

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: $background-color;
		padding: 8px;
	}

	.spec-code-section {
		background-color: $card-background;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		margin-bottom: 8px;

		.section-header {
			margin-bottom: 15px;
			padding-bottom: 8px;
			border-bottom: 1px solid $border-color;

			.header-title {
				font-size: 16px;
				font-weight: bold;
				color: $text-color-dark;
			}
		}

		.input-row {
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.input-label {
				font-size: 14px;
				color: $text-color-dark;
				margin-right: 5px;
				flex-shrink: 0;
			}

			.spec-input {
				flex: 1;
				height: 36px;
				border: 1px solid $border-color;
				border-radius: 5px;
				padding: 0 10px;
				font-size: 12px;
				background-color: #f8f8f8;
			}

			.placeholder {
				color: $text-color-light;
			}
		}

		.clipboard-status {
			font-size: 12px;
			color: $primary-color;
			text-align: right;
			margin-top: 5px;
		}
	}

	.footer-buttons-section {
		background-color: $card-background;
		padding: 5px 5px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

		.print-button {
			background-color: $primary-color;
			color: #fff;
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			border-radius: 8px;
			text-align: center;

			&[disabled] {
				background-color: lighten($primary-color, 20%);
				opacity: 0.7;
			}
		}
	}

	.status-section {
		background-color: $card-background;
		padding: 10px 15px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		margin-top: 8px;

		.status-text {
			font-size: 14px;

			&.success {
				color: #09bb07;
			}

			&.error {
				color: #f76260;
			}

			&.info {
				color: $primary-color;
			}
		}
	}
</style>